
<template>
    <Tabs  @on-click="changeTab" :value="tab_name">
        <TabPane label="详情" name="summary">
            <Card v-model="detail" style="height:72vh;overflow:auto">
                <div class="box">
                    <div class="column-1"  style="float: left;">
                        <span>名称:</span><pre>{{ detail.name }}</pre>
                        <span>命名空间:</span><pre>{{ detail.namespace }}</pre>
                        <span>创建时间:</span><pre>{{ detail.create_time }}</pre>
                        <span>标签:</span><pre>{{ detail.labels }}</pre>
                        <span>镜像:</span><pre>{{ detail.image }}</pre>
                    </div>
                    <div class="column-2">
                        <span>状态:</span><pre>{{ detail.pods }}</pre> 
                        <span>更新策略:</span><pre>{{ detail.strategy }}</pre>

                    </div> 
                </div>
            </Card>
        </TabPane>
        <TabPane label="扩缩容" name="hpa">
            <i-table border stripe   :columns="hpa_format" :data="hpa_list" :height="sharedState.tableHeight" >
            </i-table >
        </TabPane>
        <TabPane label="事件" name="event">
            <i-table border stripe  :columns="event_format" :data="event_list" :height="sharedState.tableHeight" >
            </i-table >
        </TabPane>
    </Tabs>
</template>


<script>

import {k8s_cluster_post} from '@/api/http'
import { get_deployment_detail} from  '@/api'
import store from '@/store'
export default {
    data() {
        return {
            sharedState: store.state,
            event_format: [
                {
                    title: '消息',key: 'message',width: 800,
                },
                {
                    title: '原因',key: 'reason',
                },
                {
                    title: '来源',key: 'source',
                },
                {
                    title: '最近出现于',key: 'last_seen',
                },
                {
                    title: '最早出现于',key: 'first_seen',
                },
            ],
            event_list: [],
            hpa_format:[
                {
                    title: 'hpa名字',key: 'name',
                },
                {
                    title: '目标 CPU 使用率',key: 'targetCPUUtilizationPercentage',
                },
                {
                    title: '当前 CPU 使用率',key: 'currentCPUUtilizationPercentage',
                },
                {
                    title: '当前副本数',key: 'currentReplicas',
                },
                {
                    title: '最小副本数',key: 'minReplicas',
                },
                {
                    title: '最大副本数',key: 'maxReplicas',
                },
                {
                    title: '创建时间',key: 'create_time',
                },
            ],
            hpa_list: [] ,
            detail: {
                name: '',
                namespace: '',
                labels:'',
                create_time: null,
            
            },
            // tab切换
            tab_name: "summary"
        }
    },
    methods: {
        // 切换tab点击事件
        changeTab(name){
            this.tab_name = name
            localStorage.setItem("deploy_detail_tab_name",name)
        },
        refresh() {
            let query = this.$router.currentRoute.query
            let name = query.name
            let namespace = query.namespace
            if (name == null || namespace == null ){
                this.$Message.error("name,namesapce不能为空")
                return
            }
            let data = {"namespace":namespace,'name':name}

            k8s_cluster_post(get_deployment_detail,data).then( (response) => {
                this.detail = response.data
                if(this.detail.hpa){
                    this.hpa_list.push(this.detail.hpa)
                }
                if(this.detail.event_list){
                    this.event_list = this.detail.event_list
                }else{
                    console.log("不装载event_list")
                }
            })
        }
    },
    mounted: function() {
        this.refresh()
        let tab = localStorage.getItem("deploy_detail_tab_name")
        if(tab) {
            console.log("刷新加载的tab:",tab)
            this.tab_name = tab
        }
    }
}
</script>
<style scoped>
    span {
        color: purple;
    }
    .box {
        display: flex;
        display: -webkit-flex; 
    }

    .column-2 {
        flex:1;
    } 

    .column-1,.column-2,.column-3 {
        box-sizing: border-box;
    }
</style>
<style >
    pre{
        margin-left:40px;
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>